<template>
    <div class="margin-top-10">
        <Row type="flex" justify="space-between">
            <Row>
                <Select v-model="selectMode" style="width:200px">
                    <Option value="ipc">按照IPC查看</Option>
                    <Option value="user">按照员工查看</Option>
                </Select>
                <DatePicker type="daterange" v-model="queryDateRange" placeholder="选择时间段" format="yyyy-MM-dd"
                            style="width: 300px;margin-right:8px"></DatePicker>
                <Button @click="search" type="primary">查询</Button>
            </Row>
        </Row>
        <div ref="charts" style="width:100%;height:400px;margin: 10px"></div>
    </div>
</template>

<script>
    import ME from '@/controllers/statistics'
    import echarts from 'echarts'
    import TimeUtils from '@/libs/time'
    import DateUtils from '../../../node_modules/iview/src/utils/date'
    import TimePickerUtils from 'src/libs/time-picker-utils'

    let chart;
    export default {
        name: "ipc-statistics",
        data() {
            return {
                queryDateRange: [null, null],
                trackData: {},
                selectMode: 'ipc'
            }
        },
        mounted() {
            chart = echarts.init(this.$refs['charts'])
            this.option = {
                title: {
                    text: '今日人流量分布',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxis
                    // data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisPointer: {
                        snap: true
                    }
                },
                series: [
                    {
                        name: '人流量',
                        type: 'line',
                        smooth: true,
                        // data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                        data: this.values
                    }
                ]
            }

            chart.setOption(this.option)
            window.addEventListener('resize', () => {
                chart.resize()
            })

            ME.getTodayTraffic().then(json => {
                if (json.code == 0) {
                    this.trackData = json.data
                }
            })

        },
        methods: {
            search() {
                if (!this.queryDateRange[0] || !this.queryDateRange[1]) {
                    ME.getTodayTraffic().then(json => {
                        if (json.code == 0) {
                            this.trackData = json.data
                        }
                    })
                } else {
                    let {dateFrom, dateTo} = TimePickerUtils.changeTime(this.queryDateRange)
                    ME.getTraffic(dateFrom, dateTo).then(json => {
                        if (json.code == 0) {
                            this.trackData = json.data
                            this.$Message.info("更新成功")
                        }
                    })
                }
            },
            refresh(data, mode) {
                let series = []
                let title = "今日人流量分布"
                if (this.queryDateRange[0] && this.queryDateRange[1]) {
                    let date_from = TimeUtils.getStr(this.queryDateRange[0], 'yyyy/MM/dd')
                    let date_to = TimeUtils.getStr(this.queryDateRange[1], 'yyyy/MM/dd')
                    title = `${date_from} - ${date_to}人流量分布`
                }
                let legenData = []
                for (let item of data.series[mode]) {
                    legenData.push(`${item.name}(单位：${item.unit})`)
                    series.push({
                        name: `${item.name}(单位：${item.unit})`,
                        type: 'line',
                        data: item.value
                    })
                }
                let size = series[0].data.length
                let time = (size -1) + ":00"
                if(size < data.xAxis.length){
                    series.push({
                        type:'line',
                        markLine:{
                            lineStyle: {
                                normal: {
                                    type: 'solid'
                                }
                            },
                            data:[
                                {
                                    xAxis:time
                                }
                            ],
                            animationDuration:500,
                            symbol:"none"
                        }
                    })
                }

                let option = chart.getOption()
                option.series = series
                option.title = {
                    text: title,
                }
                option.xAxis = {
                    data: data.xAxis
                }
                option.legend = {
                    data: legenData,
                    y: 'bottom'
                    // x:right
                }
                chart.setOption(option, true)
            }
        },
        watch: {
            trackData(data) {
                this.refresh(data, this.selectMode)
            },
            selectMode(mode) {
                this.refresh(this.trackData, mode)
            }
        }
    }
</script>

<style scoped>

</style>